<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="关键字" prop="keyWords">
            <el-input
                v-model="queryParams.keywords"
                placeholder="请输入关键字"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="handleCurrentChange(1)">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="locations" stripe
                style="width: 100%"
                :row-style="{height: '0'}"
                :table-layout="'fixed'">
        <el-table-column label="#" width="50">
          <template #default="scope">
            <span class="title">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="openID" show-overflow-tooltip>
          <template #default="scope">
            <span class="ml10">{{ scope.row.openId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="微信头像">
          <template #default="scope">
            <el-avatar shape="circle" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column label="微信昵称">
          <template #default="scope">
            <span class="ml10">{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template #default="scope">
            <span class="ml10">{{ scope.row.genderLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="200">
          <template #default="scope">
            <span class="ml10">{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="scope">
            <span class="ml10">{{ scope.row.createdAt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="handleEdit(scope.row)">详情</el-button>
            <el-button size="small" text type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="list-pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <EditLocation :act-type="acType" ref="editLocationRef" @callback="handleCurrentChange(1)"/>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, onBeforeMount, ref} from 'vue';
import {getPatients} from "/@/api/lib/patient";
import EditLocation from "/@/views/system/location/component/editLocation.vue";

export default defineComponent({
  name: 'systemLocations',
  components: {EditLocation},
  setup() {
    const editLocationRef = ref();
    const acType = ref('add')
    const state = reactive({
      queryParams: {
        keywords: null,
        pageNum: 1,
        pageSize: 10,
      },
      locations: [],
      total: 0,
    });
    onBeforeMount(() => {
      noticeList();
    });
    const noticeList = () => {
      getPatients(state.queryParams).then(res => {
        state.locations = res.data.list;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
      })
    };
    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      noticeList();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      noticeList();
    };
    const handleDetail = (_row: any) => {
      // acType.value = _row ? 'edit' : 'add'
      // editLocationRef.value.openDialog(_row);
    };
    const handleEdit = (_row: any) => {
      // acType.value = _row ? 'edit' : 'add'
      // editLocationRef.value.openDialog(_row);
    };
    const handleDelete = (_row: any) => {

    };
    return {
      acType,
      editLocationRef,
      noticeList,
      handleSizeChange,
      handleCurrentChange,
      handleDetail,
      handleEdit,
      handleDelete,
      ...toRefs(state),
    };
  },
});
</script>
